<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<cms:ads   code="'img_HRb0T0',
'ZY_ShengChanJiDi_1',
'roduc_2',
'ZY_LiQingJiaoBanZhan_3',
'sphal_4',
'img_jEWbl5',
'ZY_LiQingJiaoBanZhan_6',
'sphal_7',
'img_HhlNx8',
'ZY_LiQingJiaoBanZhan_9',
'sphal_10',
'img_bbnwe11',
'ZY_GongSiGaiKuang_12',
'ompan_13',
'ZY_GongSiJianJie_14',
'ZY_XiangTanTianShiLiQing_15',
'ZY_QiYeZiZhi_16',
'nterp_17',
'img_rLmQ_18',
'img_rMlmZ19',
'ZY_ShiGongAnLi_20',
'onstr_21',
'ZY_XiangTanShiKeJiLu_22',
'ZY_XiangTanShiBaiYunLu_23',
'ZY_XiangTanShiLianChengDa_24',
'ZY_XiangTanShiJiangNanDa_25',
'ZY_ChaKanGengDuo_26',
'img_GSA2427',
'ZY_SheBeiZhanShi_28',
'quipm_29',
'img_vi3Hx30',
'img_w2X$931',
'img_cE3nW32',
'img_HDHRV33',
'img_t7cDK34'
"  ></cms:ads>
<!doctype html>
<html>
 <head>
  <title>${网页标题}</title>
  <meta charset="UTF-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> 
  <link rel="stylesheet" href="http://hwfile.jyymatrix.cc/jiaofatianshi/pc/css/swiper.min.css"> 
  <link rel="stylesheet" href="http://hwfile.jyymatrix.cc/jiaofatianshi/pc/css/common.css"> 
  <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]--> 
  <style>.carousel-img{ width: 100%; height: 100%; } .el-carousel__arrow{ border-radius: 0; width: 42px; height: 42px; } .el-carousel__arrow i{ font-size: 22px; } .box{ text-align: center; padding-top: 80px; padding-bottom: 80px; } .bg-gray{ background: #F7F7F7; } .box .title{ font-size: 22px; margin-bottom: 5px; } .box .sub-title{ font-size: 20px; margin-bottom: 40px; } .production-base .swiper-slide { -webkit-transition: transform 1.0s; -moz-transition: transform 1.0s; -ms-transition: transform 1.0s; -o-transition: transform 1.0s; -webkit-transform: scale(0.76); transform: scale(0.76); } .swiper-slide img{ width: 100%; height: 300px; } .production-base .swiper-slide-active{ -webkit-transform: scale(1); transform: scale(1); } .swiper-button-next, .swiper-button-prev{ width: 16px; } .swiper-button-prev{ background-image: url('http://hwfile.jyymatrix.cc/jiaofatianshi/pc/images/prev.png'); background-size: contain; left: 0; } .swiper-button-next{ background-image: url('http://hwfile.jyymatrix.cc/jiaofatianshi/pc/images/next.png'); background-size: contain; right: 0; } .production-base .swiper-slide .desc{ background: #F7F7F7; padding: 50px 0; } .production-base .swiper-slide-active .desc{ background: #2574B9; } .production-base .swiper-slide .desc .name{ font-size: 14px; margin-bottom: 10px; } .production-base .swiper-slide-active .desc .name{ color: #F6EDED; } .production-base .swiper-slide .desc .line{ width: 40px; height: 1px; background: #090909; margin: 0 auto; } .production-base .swiper-slide-active .desc .line{ background:#F6EDED; } .company-info .left{ background: #ffffff; margin-right: 24px; text-align: left; } .company-info .article-title{ font-size: 16px; padding: 20px 20px 10px; } .company-info .article-content{ font-size: 14px; padding: 0 20px; line-height: 30px; } .company-info .business-license{ width: 290px; display: block; box-shadow: 0 0 8px rgb(9 9 9 / 20%); margin-top: 24px; } .construction-case{ } .construction-case .left{ width: 256px; flex: 0 0 256px; background: #F5F5F5; margin-right: 24px; } .construction-case .left p{ text-align: center; cursor: pointer; width: 100%; font-size: 16px; } .construction-case .left p a{ color: #090909; } .construction-case .left p.active{ background: #2574B9; color: #ffffff; } .construction-case .left p.active a{ color: #ffffff; } .construction-case .right .case-img{ width: 100%; height: 380px; } .equipment{ background: url('http://hwfile.jyymatrix.cc/jiaofatianshi/pc/images/equipment-bg.png') no-repeat; background-size: 100% 100%; } .equipment .title{ color: #ffffff; } .equipment .sub-title{ color: rgba(255,255,255,0.5); } .equipment .equipment-swiper{ position: relative; } .equipment .swiper-slide { width: 520px; height: 368px; } .equipment-swiper-button-next, .equipment-swiper-button-prev { position: absolute; top: 50%; width: 40px; height: 80px; margin-top: -40px; z-index: 10; cursor: pointer; background: rgba(0,0,0,0.6); } .equipment-swiper-button-prev { left: 0; background-image: url(http://hwfile.jyymatrix.cc/jiaofatianshi/pc/images/prev2.png); background-size: 24px; background-position: center; background-repeat: no-repeat; } .equipment-swiper-button-next { right: 0; background-image: url(http://hwfile.jyymatrix.cc/jiaofatianshi/pc/images/next2.png); background-size: 24px; background-position: center; background-repeat: no-repeat; }.company-info .swiper-container {background: #ffffff;padding: 20px 0;}
        .company-info .swiper-container img{width: 100%;height: 215px;display: block;}
        .company-info .swiper-button-next{background-color: rgba(0,0,0,0.4);background-image: url(http://hwfile.jyymatrix.cc/jiaofatianshi/pc/images/next2.png);background-size: 18px;padding: 4px;}
        .company-info .swiper-button-prev{background-color: rgba(0,0,0,0.4);background-image: url(http://hwfile.jyymatrix.cc/jiaofatianshi/pc/images/prev2.png);background-size: 18px;padding: 4px;}
        </style>
  <meta name="keywords" content="${网页关键词}">
  <meta name="description" content="${网页描述 }">
 </head> 
 <body> 
  <div id="app"> 
   <jsp:include page="_top.jsp"></jsp:include> 
   <el-carousel indicator-position="none" height="700px"> 
    <el-carousel-item v-for="item in 4" :key="item"> 
     <img src="${img_HRb0T0.adImg}" class="carousel-img zy" data-type="ad" data-id="${img_HRb0T0.adId}"> 
    </el-carousel-item> 
   </el-carousel> 
   <div class="box production-base"> 
    <div class="container"> 
     <h3 class="title zy" data-type="ad" data-id="${ZY_ShengChanJiDi_1.adId}">${ZY_ShengChanJiDi_1.adTitle}</h3> 
     <h3 class="sub-title color-gray zy" data-type="ad" data-id="${roduc_2.adId}">${roduc_2.adTitle}</h3> 
     <div class="swiper-container"> 
      <div class="swiper-wrapper">
       <cms:arts var="scjdList" code="scjd" pageNow="0" pageSize="5"></cms:arts>
        <c:forEach items="${scjdList }" var="scjdArt" varStatus="artStatus" >
        <div class="swiper-slide">
         <div class="desc">
          <h3 class="name zy" >${scjdArt.artTitle}</h3>
 <%--         <h3 class="name zy" data-type="ad" data-id="${sphal_4.adId}">${sphal_4.adTitle}</h3> --%>
          <p class="line"></p>
         </div>
         <img src="${scjdArt.artImage}" class="zy">
        </div>
       </c:forEach>
     </div>

      <div class="button">
       <div class="swiper-button-prev"></div>
       <div class="swiper-button-next"></div>
      </div>
     </div>
    </div>
   </div> 
   <div class="box bg-gray company-info"> 
    <div class="container"> 
     <h3 class="title zy" data-type="ad" data-id="${ZY_GongSiGaiKuang_12.adId}">${ZY_GongSiGaiKuang_12.adTitle}</h3> 
     <h3 class="sub-title color-gray zy" data-type="ad" data-id="${ompan_13.adId}">${ompan_13.adTitle}</h3> 
     <div class="flex"> 
      <div class="left flex-1">
       <cms:art var="gsdkArt" id="939"  queryAround="true" ></cms:art>
       <div class="swiper-container">
            <div class="swiper-wrapper">

             <c:forEach items="${gsdkArt.images }" var="artImg" varStatus="status" >
                <div class="swiper-slide">
                    <img src="${artImg.path}" >
                </div>
             </c:forEach>
            </div>
            <div class="button">
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>
       <p class="article-title zy">${gsdkArt.artTitle}</p>
       <p class="article-content zy">${gsdkArt.artAbstract} <a href="${path }/do/redirect/pc/companyProfile?code=gsgk&pageNow=0&id=939"><查看更多></a> </p>
      </div> 
      <div class="right"> 
       <h3 class="title zy" data-type="ad" data-id="${ZY_QiYeZiZhi_16.adId}">${ZY_QiYeZiZhi_16.adTitle}</h3> 
       <h3 class="font-22 color-gray zy" data-type="ad" data-id="${nterp_17.adId}">${nterp_17.adTitle}</h3> 
       <img src="${img_rLmQ_18.adImg}" class="business-license zy" data-type="ad" data-id="${img_rLmQ_18.adId}"> 
       <img src="${img_rMlmZ19.adImg}" class="business-license zy" data-type="ad" data-id="${img_rMlmZ19.adId}"> 
      </div> 
     </div> 
    </div> 
   </div> 
   <div class="box construction-case"> 
    <div class="container"> 
     <h3 class="title zy" data-type="ad" data-id="${ZY_ShiGongAnLi_20.adId}">${ZY_ShiGongAnLi_20.adTitle}</h3> 
     <h3 class="sub-title color-gray zy" data-type="ad" data-id="${onstr_21.adId}">${onstr_21.adTitle}</h3> 
     <div class="flex"> 
      <div class="left flex flex-column">
       <cms:arts var="sgalList" code="sgal" pageNow="0" pageSize="4"></cms:arts>
       <c:forEach items="${sgalList }" var="sgalArt" varStatus="artStatus" >
       <p class="flex-1 flex align-center space-center zy" onclick="window.location.href='${path}/do/redirect/pc/typeArticle?code=sgal1&pageNow=0&parent=sgal&id=${sgalArt.artId}'">${sgalArt.artTitle}</p>
       </c:forEach>
       <p class="flex-1 flex align-center space-center"><a href="${path}/do/redirect/pc/companyProfileType?code=sgal1&pageNow=0&parent=sgal" class="zy">${ZY_ChaKanGengDuo_26.adTitle}</a></p>
      </div> 
      <div class="right flex-1"> 
       <img src="${img_GSA2427.adImg}" class="case-img zy" data-type="ad" data-id="${img_GSA2427.adId}">
      </div> 
     </div> 
    </div> 
   </div> 
   <div class="box bg-gray equipment"> 
    <div class="container"> 
     <h3 class="title zy" data-type="ad" data-id="${ZY_SheBeiZhanShi_28.adId}">${ZY_SheBeiZhanShi_28.adTitle}</h3> 
     <h3 class="sub-title zy" data-type="ad" data-id="${quipm_29.adId}">${quipm_29.adTitle}</h3> 
     <div class="equipment-swiper"> 
      <div class="swiper-container"> 
       <div class="swiper-wrapper">
        <cms:arts var="sbzsList" code="sbzs" pageNow="0" pageSize="5"></cms:arts>
        <c:forEach items="${sbzsList }" var="sbzsArt" varStatus="artStatus" >
        <div class="swiper-slide">
         <img src="${sbzsArt.artImage}" class="zy">
        </div>
        </c:forEach>
       </div>
      </div> 
      <div class="equipment-swiper-button-prev"></div> 
      <div class="equipment-swiper-button-next"></div> 
     </div> 
    </div> 
   </div> 
   <jsp:include page="_footer.jsp"></jsp:include> 
  </div>  
  <script src="http://hwfile.jyymatrix.cc/jiaofatianshi/pc/js/vue.js"></script> 
  <script src="http://hwfile.jyymatrix.cc/jiaofatianshi/pc/js/index.js"></script> 
  <script src="http://hwfile.jyymatrix.cc/jiaofatianshi/pc/js/swiper.min.js"></script> 
  <script>
        new Vue({
            el: '#app',
            data: function() {
                return { 

                }
            },
            mounted(){
                var swiper = new Swiper('.production-base .swiper-container',{
                    speed:1000,
                    loop:true,
                    loopedSlides: 5,
                    centeredSlides : true,
                    slidesPerView: 3,
                    spaceBetween: 0,
                    prevButton:'.swiper-button-prev',
                    nextButton:'.swiper-button-next'
                });
                var equipmentSwiper = new Swiper('.equipment .swiper-container', {
                    watchSlidesProgress: true,
                    slidesPerView: 'auto',
                    centeredSlides: true,
                    loop: true,
                    loopedSlides: 5,
                    prevButton: '.equipment-swiper-button-prev',
                    nextButton: '.equipment-swiper-button-next',
                    onProgress: function(swiper, progress) {
                        for (i = 0; i < swiper.slides.length; i++) {
                            var slide = swiper.slides.eq(i);
                        var slideProgress = swiper.slides[i].progress;
                        modify = 1;
                        if (Math.abs(slideProgress) > 1) {
                            modify = (Math.abs(slideProgress) - 1) * 0.2 + 1;
                        }
                        translate = slideProgress * modify * 278 + 'px';
                        scale = 1 - Math.abs(slideProgress) / 5;
                        zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                        slide.transform('translateX(' + translate + ') scale(' + scale + ')');
                        slide.css('zIndex', zIndex);
                        slide.css('opacity', 1);
                        if (Math.abs(slideProgress) > 3) {
                            slide.css('opacity', 0);
                        }
                        }
                    },
                    onSetTransition: function(swiper, transition) {
                        for (var i = 0; i < swiper.slides.length; i++) {
                            var slide = swiper.slides.eq(i)
                            slide.transition(transition);
                        }

                    }
                });
                var itemEls = document.getElementsByClassName('nav-item-hover');
                for(var i= 0; i < itemEls.length;i++){
                    itemEls[i].onmouseover = function(){
                        var els = this.getElementsByClassName('nav-layout');
                        if(els.length) {
                            els[0].style.display = 'block'
                        };
                    }
                    itemEls[i].onmouseout = function(){
                        var els = this.getElementsByClassName('nav-layout');
                        if(els.length) {
                            els[0].style.display = 'none'
                        };
                    }
                }
                var swiper = new Swiper('.company-info .swiper-container',{
                    speed:1000,
                    loop:true,
                    loopedSlides: 5,
                    centeredSlides : true,
                    slidesPerView: 3,
                    spaceBetween: 20,
                    prevButton:'.swiper-button-prev',
                    nextButton:'.swiper-button-next'
                });
            }
        })
    </script> 
 </body>
</html>